<template>
  <div>
    <draggable @change="sortData" v-model="list" :animation="340">
      <transition-group class="left_container">
        <div v-for="i in list" :key="i.id" class="chart-wrapper">
          <div class="current current-normal">
            <img draggable="false" :src="getImg(i.icon)" alt="暂无图片" :title="i.id"/>
            <span>{{ i.name }}</span>
          </div>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: { draggable },
  name: "getResourceList",
  props: {
    group: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  created() {
    // this.API.getUserAllResource({ property: "H5" }).then(data => {
    //   console.log(data);
    // });
    this.getData();
  },
  data() {
    return {
      list: []
    };
  },
  methods: {
    sortData() {
      // 排序
      let resourceIds = [];
      this.list.map(i => {
        resourceIds.push(i.id);
      });
      let body = {
        resourceGroup: this.group,
        resourceIds
      };
      console.log(body);
      this.API.updateResourceAndUserResource({ body }).then(data => {
        this.$message.success("排序成功");
      });
    },
    getData() {
      this.list = [];
      this.API.getResourceAppPageList({ pageSize: 1000 }).then(ret => {
        let list = ret.data.records;
        this.API.getResourceAppIdsByGroupId({
          groupId: this.group.id
        }).then(ret => {
          list.map(item => {
            if (ret.data.includes(item.id)) {
              this.list.push(item);
            }
          });
        });
      });
    },
    getImg(val) {
      return window.api.image + "/" + val;
    }
  }
};
</script>

<style scoped lang="scss">
.left_container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  .chart-wrapper {
    display: flex;
    justify-content: center;
    width: 16%;
    padding: 10px;

    .current {
      width: 60px;
      height: 50px;
      border-radius: 10px;
      padding: 5px;
      display: flex;
      cursor: move;
      flex-direction: column;
      align-items: center;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;

      img {
        width: 30px;
      }

      span {
        letter-spacing: 1px;
        opacity: 0.9;
        margin-top: 5px;
        font-size: 12px;
      }
    }

    .current-active {
      background-color: #d0deea;
    }

    .current-normal {
      background-color: #f4faff;
    }
  }
}
</style>
